<template>
    <div class="hot">
        <div class="hot-top">
            <img src="../../../assets/img/hot1.png" alt="">
            <span >本周热门榜单</span>
<span class="hot-right">全部榜单>></span>
        </div>
        <ul class="hot-list">
        <li class="hot-item" v-for='item in hotlist' :key="item.id">
            <img :src="item.imgurl" alt="photo">
            <p>{{item.title}}</p><p><span class="hot-price">￥{{item.price}}</span>起 </p>
        </li>
             
         </ul>
         </div>
         
</template>
<style scoped lang='stylus'>
@import '~css/comment.styl'
.hot{
    margin-top: .2rem;
    background: #fff;
    font-size: .28rem;
}
.hot-list{
   
    overflow-x:scroll ;
    white-space: nowrap;
    padding-bottom: .2rem;
    

 

}
.hot-item{

    display: inline-block;
    width: 2rem;
    height: 2.7rem;
    margin-right: .1rem;

    
    


}

.hot-item p{
    text-align: center;
    textOverflow();
    
 
    

}
 .hot-item p .hot-price{
     color: #ff8300;
     font-size: .32rem;

}
.hot-top{
padding: .2rem;
    position: relative;
    font-size: .30rem;
    font-weight: bold;

}
.hot-top img{
    width: .3rem;
    height: .3rem;
}
.hot-list .hot-item img{
 
    width:1.2rem;
    height:1.2rem;
  
}
.hot-right{
    position: absolute;
    right: .2rem;
    top:.3rem;
    font-size: .28rem;
    color: #616161;
}
</style>
<script >

export default({
    props:['hotlist'],
    data(){
        return {
           
        }
    }
    
})
</script>